import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import AvatarView from '../../AvatarView'
import StatusView from '../../StatusView'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBolt, faImage, faUser, faUsers } from '@fortawesome/free-solid-svg-icons'
import { TopicBannerMock } from './mock'
import BaseLayout from '../../_Layout/BaseLayout'
import { TopicService } from '../../../transfer/service/TopicService'
import { Link } from 'react-router-dom'
import SubPhotoModal from '../../ModalView/SubPhotoModal'

interface ITopicBannerProps {
    type: string
}

export default function TopicBanner(props: ITopicBannerProps) {
    const [topicBanner, setTopicBanner] = useRecoilState(TopicBannerMock)
    const [statusWidth, setStatusWidth] = useState<any>()
    const [isExpend, setIsExpend] = useState<boolean>(false)
    const [num, setNum] = useState<number>()

    // 根据ID获取专题详细信息
    useEffect(() => {
        new TopicService().getTopicInfo(props.type).then(res => {
            setTopicBanner(res.data.data)
        })
        new TopicService().getTopicImg(props.type, 0, 100).then(res => {
            setNum(res.data.data.length)
        })
    }, [props.type])

    // 初始化网页布局
    useEffect(() => {
        $(document).width()! > 1050 ? setStatusWidth('30%') : setStatusWidth('40%')
    }, [])

    const handleShowSunModal = () => {
        if (localStorage.getItem('account') != '') setIsExpend(true)
    }

    return (
        <BaseLayout>
            <div
                className={style.container}
                style={{
                    ['--status-width' as any]: statusWidth
                }}>
                <div className={style.topic__info}>
                    <p>{topicBanner.title}</p>
                    <span>{topicBanner.intro}</span>
                </div>
                <div className={style.topic__status}>
                    <div className={style.status__view}>
                        <div className={style.item}>
                            <div className={style.item__left}>
                                <div className={style.icon}>
                                    <FontAwesomeIcon icon={faBolt} className={style.state__icon} />
                                </div>
                                <span>状态</span>
                            </div>
                            <StatusView state={topicBanner.state} />
                        </div>

                        <div className={style.line} />
                        <div className={style.item}>
                            <div className={style.item__left}>
                                <div className={style.icon}>
                                    <FontAwesomeIcon icon={faUser} />
                                </div>
                                <span>创建者</span>
                            </div>
                            <Link to={'/user/photos/' + topicBanner.owner.id} className={style.user__name}>
                                <AvatarView
                                    width={'32px'}
                                    height={'32px'}
                                    img={'http://localhost:3000/' + topicBanner.owner.avatar}
                                />
                                <span>{topicBanner.owner.nickName}</span>
                            </Link>
                        </div>
                        <div className={style.line} />
                        <div className={style.item}>
                            <div className={style.item__left}>
                                <div className={style.img__icon}>
                                    <FontAwesomeIcon icon={faImage} />
                                </div>
                                <span>贡献数</span>
                            </div>
                            <span>{num}</span>
                        </div>
                        {/*<div className={style.line} />*/}
                        {/*<div className={style.item}>*/}
                        {/*    <div className={style.item__left}>*/}
                        {/*        <div className={style.users__icon}>*/}
                        {/*            <FontAwesomeIcon icon={faUsers} />*/}
                        {/*        </div>*/}
                        {/*        <span>前五名贡献者</span>*/}
                        {/*    </div>*/}
                        {/*    <div className={style.head__group}>*/}
                        {/*        {topicBanner.topContributors.map((item, index) => {*/}
                        {/*            return (*/}
                        {/*                <AvatarView key={index} width={'24px'} height={'24px'} userId={item.userId} />*/}
                        {/*            )*/}
                        {/*        })}*/}
                        {/*    </div>*/}
                        {/*</div>*/}
                    </div>
                    <div
                        className={`${style.btn} ${topicBanner.state ? '' : 'not__allow'}`}
                        onClick={() => {
                            handleShowSunModal()
                        }}>
                        <span>
                            上传图片到 <strong>{topicBanner.title}</strong>
                        </span>

                        {isExpend ? (
                            <div
                                onClick={e => {
                                    e.stopPropagation()
                                    setIsExpend(false)
                                }}>
                                <SubPhotoModal />
                            </div>
                        ) : (
                            ''
                        )}
                    </div>
                </div>
            </div>
        </BaseLayout>
    )
}
